import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Modal} from 'antd';
import SearchSelect from 'Shared/components/SearchSelect';
import {formatMessage} from '../localize';
import SelectPanel from './SelectPanel';

const EMPTY_ARRAY = [];

const labelMap = item => `(${item.code}) ${item.name}`;
const labelMapCountry = item => item.countryName;
class DealerSelectEdit extends PureComponent {
    state = {showModal: false};
    
    onSearch = filter => this.props.getDealerSimple(Object.assign({filter}, this.props.conditions)).then(result => result.ok ? result.data.content : EMPTY_ARRAY);

    onClickSearchBtn = () => this.setState({showModal: true});

    onClose = () => this.setState({showModal: false});

    onSelect = (record = {}) => {
        this.setState({showModal: false});
        this.props.onSelect(record.id ? record : {}, this.props.id);
    };
    
    render() {
        return [
            <SearchSelect
                key="select"
                allowClear={this.props.allowClear}
                searchOnFocus={this.props.searchOnFocus}
                value={this.props.value}
                placeholder={formatMessage({
                    id: 'dealer.placeholder',
                    defaultMessage: '请输入编号或名称查询'
                })}
                keyIndex="id"
                labelMap={this.props.countryType ? labelMapCountry : labelMap}
                onSelect={this.onSelect}
                onSearch={this.onSearch}
                onClickSearchBtn={this.onClickSearchBtn}/>,
            <Modal key="modal" visible={this.state.showModal} title={formatMessage({
                id: 'dealer.modal.title',
                defaultMessage: '选择服务站'
            })} width={1000} maskClosable={false} footer={null} destroyOnClose={true} onCancel={this.onClose}>
                <SelectPanel
                    onSelect={this.onSelect}
                    getDealers={this.props.getDealers}
                    getRegions={this.props.getRegions}
                    getMarketDepartments={this.props.getMarketDepartments}
                    conditions={this.props.conditions} />
            </Modal>
        ];
    }
}


import * as api from './api';

const EMPTY_OBJECT = {};

DealerSelectEdit.defaultProps = {
    allowClear: true,
    searchOnFocus: true,
    getDealerSimple: api.getDealerSimple,
    getDealer: api.getDealers,
    getRegions: api.getRegions,
    getMarketDepartments: api.getMarketDepartments,
    conditions: EMPTY_OBJECT
};

DealerSelectEdit.propTypes = {
    /**
     * 选中后回调，(record, props.id)
     */
    onSelect: PropTypes.func.isRequired,
    allowClear: PropTypes.bool,
    conditions: PropTypes.object,
    countryType: PropTypes.bool,
    getDealerSimple: PropTypes.func,
    getDealers: PropTypes.func,
    /**
     * 增加默认查询条件
     */
    getMarketDepartments: PropTypes.func,
    /**
     * 查询服务站API，为空取默认API
     */
    getRegions: PropTypes.func,
    id: PropTypes.string,
    searchOnFocus: PropTypes.bool,
    value: PropTypes.shape({
        id: PropTypes.string,
        code: PropTypes.string,
        name: PropTypes.string
    }),
};

export default DealerSelectEdit;
